<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>购买算力</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    body {
      font-size: 16px;
    }
    [v-cloak] {
      display: none;
    }
    .user-info {
      padding: 30px;
    }
    .buy-content {
      width: 665px;
      padding: 30px;
    }
    .dzs {
      border: 1px solid #ffe58f;
      background: #fffbe6;
      padding: 8px 10px;
      color: #999;
    }
    .u-btn-w {
      display: flex;
      flex-wrap: wrap;
    }
    .u-btn-w li {
      width: 100px;
      height: 46px;
      line-height: 46px;
      border-radius: 2px;
      color: #555;
      border: 1px solid #ddd;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      margin: 0 20px 20px 0;
    }
    .u-btn-w li.on {
      color: #0e9cf2;
      border: 1px solid;
    }
    .po {
      color: #999;
    }
    .i1 {
      display: inline-block;
      border: 0;
      width: 100px;
      color: #555;
      margin-left: 10px;
      border-bottom: 2px solid #94cdf0;
      padding: 2px 10px;
    }
    
    
    .sb-btn {
      display: block;
      border: 0;
      outline: none;
      text-align: center;
      border-radius: 2px;
      padding: 0 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #c3c3c3;
      background: #f3f3f3;
      width: 100px;
      height: 40px;
      cursor: not-allowed;
      transition: .3s;
    }
    .sb-btn.on {
      color: #fff;
      background: #0e9cf2;
      cursor: pointer;
    }
    .sb-btn.ivu-btn>span {
      vertical-align: top;
    }
    .sb-btn.on:hover {
      background: #0476bb;
    }
    .u-btn-w li:last-child{
      line-height: 44px
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="buyHash">
    <div class="main">
      <section class="panel user-info mb20">
        账户余额 : <span class="lan">{{getFormatAccountSum}} TH</span>
      </section>
      <section class="panel buyz">
        <div class="buy-content">
          <p class="ptit mb30">请输入您要购买的算力数量（TH）</p>
          <ul class="u-btn-w mb20">
            <li :class="{on: hIdx === index}" v-for="(item, index) of hashList" :key="index" @click="choseHash(index)">{{item}}</li>
          </ul>
          <p class="mb10">购买算力 : <input class="i1" type="text" maxlength="5" oninput="if(value-0>5e4)value=5e4;value=value.replace(/^0|[^\d]+/, '');"
              @input="inp" v-model="query.hashNum"> TH</p>
          <p class="po mb20">≈ {{gpuNum}}张1080TI训练1小时</p>
          <p class="mb20" line></p>
          <p class="mb10">支付金额: {{paymentAmount}} TAIC</p>
          <div class="dzs mb40">1 TH = 0.5 TAIC = CNY ￥ 0.5</div>
          <i-button class="sb-btn" size="large" type="info" :class="{on: isSubmit}" :loading="bLoading" @click="requestList"
            :disabled="!isSubmit">提交订单</i-button>
        </div>
      </section>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var localhostUrl = 'http://localhost:8088';
    var vm = new Vue({
      el: '#app',
      data: {
        hIdx: 0,
        bLoading: false,
        accountSum: 0,
        hashList: [100, 300, 500, 1000, 3000, 5000, 10000, 30000, 50000, '自定义'],
        order_info: {},
        query: {
          hashNum: '',
        }
      },
      methods: {
        init() {
          this.requestUserData()
        },
        choseHash(index) {
          this.hIdx = index
          this.query.hashNum = /^\d+$/.test(this.hashList[index]) ? this.hashList[index] : ''
        },
        inp() {
          this.hIdx = this.hashList.length - 1
        },
        // 提交数据
        requestList :G.debounce(function(){
          var realUrl = '/user/createOrder';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var ydata = {
            orderth: this.query.hashNum,
          }
          var data = G.paramsSerializer(ydata)
          // 立即提交
          axios.post(url, data, {
              withCredentials: true,
            }).then(res => {

              if (res.data.code == 1) {
                this.order_info = res.data.data
                var l_info = JSON.stringify(this.order_info)
                localStorage.setItem('order_info', l_info)
                localStorage.setItem('payDueTimes', Date.now() + 1800 * 1e3);
                top.location.hash = 'buyHash_hashCacl'
              } else {
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        }, G.DEBOUNCE_DELAY || 200),

        // 获取用户数据
        requestUserData() {
          var realUrl = '/user/finduser';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          // 立即提交
          axios.post(url, {
              withCredentials: true,
            }).then(res => {
              if (res.data.code == 1) {
                this.accountSum = res.data.data.points;
              } else {
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
      },
      computed: {
        isSubmit() {
          return this.query.hashNum > 0
        },
        gpuNum() {
          return G.roundFixed(this.query.hashNum / 11.3)
        },
        paymentAmount() {
          return G.roundFixed(this.query.hashNum / 2)
        },
        getFormatAccountSum() {
          if (G.isNumber(this.accountSum)) {
            return G.toThousands(this.accountSum.toFixed(2))
          } else {
            return '获取中...'
          }
        },
      },
      mounted() {
        this.init()
        this.query.hashNum = this.hashList[0]
      }
    })
  </script>
</body>

</html>